<template>
  <div class="change-password">
      <form @submit.prevent="changePassword">
          <div class="form-group">
              <label for="currentPassword">当前密码</label>
              <input type="password" id="currentPassword" v-model="currentPassword" required>
          </div>
          <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" id="newPassword" v-model="newPassword" required>
          </div>
          <div class="form-group">
              <label for="confirmPassword">确认密码</label>
              <input type="password" id="confirmPassword" v-model="confirmPassword" required>
          </div>
          <button type="submit">确认修改</button>
      </form>
  </div>
</template>

<script>
import axios from 'axios';
import {getUserInfo} from '@/api/user.js'
export default {
  data() {
      return {
          currentPassword: '********',
          newPassword: '********',
          confirmPassword: '********',
          email: '123@123.com'
      };
  },
  mounted() {
    getUserInfo().then((res) => {
      this.email = res.data.email
    })
  },
  methods: {
      changePassword() {
          // Validate password fields
          this.currentPassword = document.getElementById('currentPassword').value;
          this.newPassword = document.getElementById('newPassword').value;
          this.confirmPassword = document.getElementById('confirmPassword').value;
          if (this.newPassword !== this.confirmPassword) {
              alert('新密码与确认密码不一致');
              return;
          } else {
              //本地测试
              const url = 'http://localhost:28080/api/user/passwd';
              //远程测试
              //axios.defaults.baseURL = 'http://43.143.82.72:28080'
              //const url = 'http://43.143.82.72:28080/api/user/passwd';

              // 发送 GET 请求
              axios.get(url, {
                params: {
                  email: this.email,
                  oldPassword: this.currentPassword,
                  password: this.newPassword
                }
              })
                .then(response => {
                  if (response.code == 200) {
                    // 重置密码成功
                    //重定向至登录页面
                    this.$router.push('/login')
                  } else {
                    this.$message.error('重置密码失败')
                  }
                })
                .catch(error => {
                  // 处理错误
                  console.error(error);
                });
          }
          // TODO: Implement password change logic
          // Reset form fields
      }
  }
};
</script>

<style scoped>
.change-password {
  background-color: #FFEACE;
  ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.change-password form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.change-password .form-group {
  margin-bottom: 10px;
}

.change-password label {
  font-size: 100%;
  font-weight: bold;
  display: block;
  /* Add this line to place labels on a separate line */
  text-align: left;
  margin-top: 5%;
}

.change-password input[type="password"] {
  font-size: 80%;
  width: 1000px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  margin-bottom: 20px;
  margin-top: 10px;
}

.change-password button {
  padding: 8px 16px;
  background-color: #FF9000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5%;
  margin-bottom: 40%;
}

button:hover {
  background-color: #007bff;
}
</style>  